<template>
<div :class="[$style.container]" @keyup.enter="onConfirm">
<el-dialog title="自定义权限" :visible.sync="actualVisible" append-to-body width="30%">
  <div class="my-3">
    <el-alert title="请勾选权限" type="error" class="my-2" v-if="!umask"/>
    <div :class="[$style.list]">
      <template v-for="row in items">
        <div class="py-2" :key="row.value" v-if="!isTeam || row.value !== 'forbidden'">
          <el-checkbox :label="row.label" v-model="permission['l_' + row.value]"></el-checkbox>
        </div>
      </template>
    </div>
  </div>
  <span slot="footer">
    <el-button size="small" :disabled="submitting" @click="onCancel" class="px-5">取 消</el-button>
    <el-button size="small" type="primary" @click="onConfirm" :loading="submitting" class="px-5">确 定</el-button>
  </span>
</el-dialog>
</div>
</template>

<script lang="ts">

import { Permission, items } from '@/config/acl'
import { ModalMixins } from '@/mixins'
import { Vue, Component, Prop, Emit, Ref } from 'vue-property-decorator'
import { mixins } from 'vue-class-component'

@Component
export default class DocUmaskOptModal extends mixins(ModalMixins) {
  data: any = null

  permission = new Permission(0)

  items = items

  isTeam = false

  get umask () {
    return this.permission.toUmask()
  }

  open (data: any, isTeam = false) {
    this.data = data
    this.isTeam = isTeam
    this.permission = new Permission(this.data || 0)
    return this.init()
  }

  onCancel () {
    this.cancel()
  }

  onConfirm () {
    if (!this.umask) return
    this.submitting = true
    setTimeout(() => {
      this.submitting = false
      this.complete(this.umask)
    }, 1500)
    // this.fm.validate().then((valid: boolean) => {
    //   if (!valid) return
    //   this.submitting = true
    //   updateTags(this.data?.id, [...this.tags, this.form.name]).then(data => {
    //     this.visible = false
    //     Object.assign(this.data, { tags: data || [] })
    //     if (this.resolve) this.resolve(data)
    //   }).finally(() => {
    //     this.submitting = false
    //   })
    // })
  }
}
</script>

<style lang="scss" module>
@import "~@/styles/vars.scss";

.container {

}

.list {
  display: flex;
  flex-wrap: wrap;

  &>* {
    flex: 0 1 auto;
    width: 25%;
  }
}

</style>
